<template>
	<view class="flex goods-container">
		<view class="good-image">
			<image :src="detail.image" mode="widthFix" class="image"></image>
		</view>
		<view class="info">
			<view class="title font-bold">
				{{detail.store_info}}
			</view>
			<view class="sales margin-top flex justify-between">
				<span>月售：{{detail.sales}}</span>
				<span>{{detail.star}}人收藏</span>
			</view>
			<view class="bottom-container margin-top flex justify-between">
				<view class="price-container">
					<text class="new font-bold">￥<text class="price">{{detail.price}}</text></text>
					<!-- <text class="old">￥</text> -->
				</view>
				<view class="num flex">
					<view class="iconfont2 icon-jianshao icon" v-if="detail.num" @click.stop="decrease"></view>
					<view class="num" v-if="detail.num">
						{{detail.num}}
					</view>
					<view class="iconfont2 icon-jia icon"  @click.stop="add"></view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				
			}
		},
		props:{
			detail:{
				type:Object,
				default:()=>{}
			}
		},
		methods:{
			add(){
				if(this.detail.num==undefined){
					this.$set(this.detail,'num',1)
				}else{
					this.detail.num+=1
				}
			},
			decrease(){
				if(this.detail.num==undefined || this.detail.num <= 0){
					return 
				}else{
					this.detail.num -=1
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.flex{
	display: flex;
}
.justify-between{
	justify-content: space-between;
}
.font-bold{
	font-weight: bold;
}
.image{
	height: 100%;
	width: 100%;
}
.margin-top{
	margin-top: 8rpx;
}

.goods-container{
	margin-bottom: 24rpx;
}
.good-image{
	width: 140rpx;
	height: 140rpx;
}
.info{
	flex-grow: 1;
	margin-left: 8rpx;
	.title{
		font-size: 32rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		max-width: 260rpx;
	}
	.sales{
		
		font-size: 24rpx;
		color: #666;
	}
	.bottom-container{
		
		.price-container{
			.new{
				color: rgb(250, 110, 14);
				font-size: 24rpx;
				.price{
					font-size: 32rpx;
				}
			}
			.old{
				margin-left: 8rpx;
				font-size: 20rpx;
				text-decoration: line-through;
				color: #999;
			}
		}
		.num{
			.icon{
				color: #0CBB48;
				font-size: 38rpx;
			}
			.num{
				padding: 0 12rpx;
			}
		}
	}
}
</style>